<template>
    222222222222222222222
    <k-chart
        ref="vChartRef"
        :option="option_column"
        :init-options="{
            renderer: 'svg'
        }"
        autoresize
        :theme="themeColor"
        style="height: 400px"
    ></k-chart>
</template>

<script setup lang="ts" name="BarCommon">
import { defineComponent, PropType, computed } from 'vue'
import classNames from '@packages/utils/className'
import KCharts from '@packages/components/Charts/KCharts/index.vue'
const Props = {
    type: {
        type: String as PropType<string>, // 转为ts类型string
        default: 'default'
    },
    size: {
        type: String as PropType<string>,
        default: 'md'
    },
    disabled: {
        type: Boolean as PropType<boolean>,
        default: false
    },
    loading: {
        type: Boolean as PropType<boolean>,
        default: false
    }
}

const initOptions = {
    renderer: 'svg'
}

const option_column = {
    title: { text: 'Column Chart' },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
}

const themeColor = {
    color: ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#58d9f9', '#05c091', '#ff8a45', '#8d48e3', '#dd79ff'],
    name: '明亮'
}
const classString = classNames([
    'we-button',
    `we-button-type-${Props.type}`,
    Props.disabled ? 'we-button-disabled' : ''
])

const chartConfig = {
    id: 'ic1dhzgj0cg00',
    isGroup: false,
    attr: { x: 895, y: 503, w: 500, h: 300, offsetX: 0, offsetY: 0, zIndex: -1 },
    styles: {
        filterShow: false,
        hueRotate: 0,
        saturate: 1,
        contrast: 1,
        brightness: 1,
        opacity: 1,
        rotateZ: 0,
        rotateX: 0,
        rotateY: 0,
        skewX: 0,
        skewY: 0,
        blendMode: 'normal',
        animations: []
    },
    preview: { overFlowHidden: false },
    status: { lock: false, hide: false },
    request: {
        requestDataType: 0,
        requestHttpType: 'get',
        requestUrl: '',
        requestIntervalUnit: 'second',
        requestContentType: 0,
        requestParamsBodyType: 'none',
        requestSQLContent: { sql: 'select * from  where' },
        requestParams: {
            Body: { 'form-data': {}, 'x-www-form-urlencoded': {}, json: '', xml: '' },
            Header: {},
            Params: {}
        }
    },
    events: { baseEvent: {}, advancedEvents: {}, interactEvents: [] },
    key: 'BarCommon',
    chartConfig: {
        key: 'BarCommon',
        chartKey: 'VBarCommon',
        conKey: 'VCBarCommon',
        title: '柱状图',
        category: 'Bars',
        categoryName: '柱状图',
        package: 'Charts',
        chartFrame: 'echarts',
        image: 'bar_x.png'
    },
    option: {
        legend: {
            show: true,
            type: 'scroll',
            x: 'center',
            y: 'top',
            icon: 'circle',
            orient: 'horizontal',
            textStyle: { color: '#B9B8CE', fontSize: 18 },
            itemHeight: 15,
            itemWidth: 15,
            pageTextStyle: { color: '#B9B8CE' }
        },
        xAxis: {
            show: true,
            name: '',
            nameGap: 15,
            nameTextStyle: { color: '#B9B8CE', fontSize: 12 },
            inverse: false,
            axisLabel: { show: true, fontSize: 12, color: '#B9B8CE', rotate: 0 },
            position: 'bottom',
            axisLine: { show: true, lineStyle: { color: '#B9B8CE', width: 1 }, onZero: true },
            axisTick: { show: true, length: 5 },
            splitLine: { show: false, lineStyle: { color: '#484753', width: 1, type: 'solid' } },
            type: 'category'
        },
        yAxis: {
            show: true,
            name: '',
            nameGap: 15,
            nameTextStyle: { color: '#B9B8CE', fontSize: 12 },
            inverse: false,
            axisLabel: { show: true, fontSize: 12, color: '#B9B8CE', rotate: 0 },
            position: 'left',
            axisLine: { show: true, lineStyle: { color: '#B9B8CE', width: 1 }, onZero: true },
            axisTick: { show: true, length: 5 },
            splitLine: { show: true, lineStyle: { color: '#484753', width: 1, type: 'solid' } },
            type: 'value'
        },
        grid: { show: false, left: '10%', top: '60', right: '10%', bottom: '60' },
        tooltip: { show: true, trigger: 'axis', axisPointer: { show: true, type: 'shadow' } },
        dataset: {
            dimensions: ['product', 'data1', 'data2'],
            source: [
                { product: 'Mon', data1: 120, data2: 130 },
                { product: 'Tue', data1: 200, data2: 130 },
                { product: 'Wed', data1: 150, data2: 312 },
                { product: 'Thu', data1: 80, data2: 268 },
                { product: 'Fri', data1: 70, data2: 155 },
                { product: 'Sat', data1: 110, data2: 117 },
                { product: 'Sun', data1: 130, data2: 160 }
            ]
        },
        series: [
            {
                type: 'bar',
                barWidth: 15,
                label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
                itemStyle: { color: null, borderRadius: 2 }
            },
            {
                type: 'bar',
                barWidth: 15,
                label: { show: true, position: 'top', color: '#fff', fontSize: 12 },
                itemStyle: { color: null, borderRadius: 2 }
            }
        ],
        backgroundColor: 'rgba(0,0,0,0)'
    }
}

const option = computed(() => {
    return {
        legend: {
            show: true,
            type: 'scroll',
            x: 'center',
            y: 'top',
            icon: 'circle',
            orient: 'horizontal',
            textStyle: {
                color: '#B9B8CE',
                fontSize: 18
            },
            itemHeight: 15,
            itemWidth: 15,
            pageTextStyle: {
                color: '#B9B8CE'
            }
        },
        xAxis: {
            show: true,
            name: '',
            nameGap: 15,
            nameTextStyle: {
                color: '#B9B8CE',
                fontSize: 12
            },
            inverse: false,
            axisLabel: {
                show: true,
                fontSize: 12,
                color: '#B9B8CE',
                rotate: 0
            },
            position: 'bottom',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#B9B8CE',
                    width: 1
                },
                onZero: true
            },
            axisTick: {
                show: true,
                length: 5
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#484753',
                    width: 1,
                    type: 'solid'
                }
            },
            type: 'category'
        },
        yAxis: {
            show: true,
            name: '',
            nameGap: 15,
            nameTextStyle: {
                color: '#B9B8CE',
                fontSize: 12
            },
            inverse: false,
            axisLabel: {
                show: true,
                fontSize: 12,
                color: '#B9B8CE',
                rotate: 0
            },
            position: 'left',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#B9B8CE',
                    width: 1
                },
                onZero: true
            },
            axisTick: {
                show: true,
                length: 5
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#484753',
                    width: 1,
                    type: 'solid'
                }
            },
            type: 'value'
        },
        grid: {
            show: false,
            left: '10%',
            top: '60',
            right: '10%',
            bottom: '60'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
                show: true,
                type: 'shadow'
            }
        },
        dataset: {
            dimensions: ['product', 'data1', 'data2'],
            source: [
                {
                    product: 'Mon',
                    data1: 120,
                    data2: 130
                },
                {
                    product: 'Tue',
                    data1: 200,
                    data2: 130
                },
                {
                    product: 'Wed',
                    data1: 150,
                    data2: 312
                },
                {
                    product: 'Thu',
                    data1: 80,
                    data2: 268
                },
                {
                    product: 'Fri',
                    data1: 70,
                    data2: 155
                },
                {
                    product: 'Sat',
                    data1: 110,
                    data2: 117
                },
                {
                    product: 'Sun',
                    data1: 130,
                    data2: 160
                }
            ]
        },
        series: [
            {
                type: 'bar',
                barWidth: 15,
                label: {
                    show: true,
                    position: 'top',
                    color: '#fff',
                    fontSize: 12
                },
                itemStyle: {
                    color: null,
                    borderRadius: 2
                }
            },
            {
                type: 'bar',
                barWidth: 15,
                label: {
                    show: true,
                    position: 'top',
                    color: '#fff',
                    fontSize: 12
                },
                itemStyle: {
                    color: null,
                    borderRadius: 2
                }
            }
        ],
        backgroundColor: 'rgba(0,0,0,0)'
    }
})
</script>

<style lang="scss"></style>
